<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>地图</title>
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/map.css">
		<link rel="stylesheet" href="../css/mui.min.css">
	</head>

	<body>
		<div id="app">
			<div id="map">地图加载中...</div>
			<div class="maplist" v-if="listFlag" v-cloak>
				<div class="tit">
					<h2>距离最近</h2>
					<span @click="pull_down"><img src="../images/pull_down.png" alt="下拉框"></span>
				</div>
				<ul>
					<li v-for="item in listTwo" class="list" @click="Routers(myPoint,item.pointAll,item)">
						<span>{{item.toiletName}}</span><span>{{item.kms}}</span>
					</li>
				</ul>
			</div>

			<div class="map_info" v-if="markFlag" v-cloak>
				<div class="title">
					<h2>{{markerobj.toiletName}}</h2>
					<button @click="Routers2(myPoint,markerobj.pointAll)">查看路线</button>
					<button @click="Open_info">查看详情</button>
					<span @click="pull_down"><img src="../images/pull_down.png" alt="下拉框"></span>
				</div>
				<ul>
					<li><label>使用状态</label>:<span>{{markerobj.useState}}</span></li>
					<li><label>步行距离</label>:<span>{{markerobj.kms}}</span></li>
					<li><label>用时</label>:<span>{{markerobj.times}}</span></li>
					<li><label>具体地址</label>:<span>{{markerobj.toiletAddress}}</span></li>
				</ul>
			</div>

		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/vue-resource.js"></script>
		<script src="../js/gps.js"></script>
		<script src="../js/base.js"></script>

<script type="text/javascript">
// H5 plus事件处理
	function plusReady() {
		
				// 绘制地图============================================================
				var app = new Vue({
					el: "#app",
					data: {
						list: [],
						map: null, //地图用到的
						em: null, //地图用到的
						isjson: null, //获得当前位置的字符串
						currentX: null, //经度
						currentY: null, //纬度
						lists: [], //比list 多一个kms属性 公厕距离我多少米 一个realkm真实的米数
						listReal: [], //比lists 多一个realkm真实的米数
						listTwo: [], //离我最近的俩个公厕
						listFlag: false, //列表是否显示
						markFlag: false, //详情是否显示
						markerobj: {}, //显示详情内容!
						mapRange: 21, //服务半径-公里
						times: null, //到达指定位置需要的时间
						myPoint: null, //我的位置
						center: null, //中心点
						search_obj: {},//符合条件的
						router_lx:null,//路线对象
					},
					methods: {
						GetData: function() {
							var that = this;
							HTTP.post(this, 'toiletInfoController/queryToiletDistribute', function(res) {
								res.data.forEach(function(val) {
									val.locationX = Number(val.locationX);
									val.locationY = Number(val.locationY);
									val.toiletId = val.toiletId;
									val.toiletName = val.toiletName;
								});
								that.list = res.data;								
							}, function(res) {
								mui.toast(res.data.mgs);
							})
						},
						height_70: function() {
							var ch_1 = this.mapH - 160;
							var ch_2 = ch_1 + "px";
							this.em.style.height = ch_2;
							this.map.resize();
						},
						height_50: function() {
							var ch_1 = this.mapH - 190;
							var ch_2 = ch_1 + "px";
							this.em.style.height = ch_2;
							this.map.resize();
						},
						pull_down: function() { //下拉后改变地图样式重新加载地图控件
							this.listFlag = false;
							this.markFlag = false;
							this.em.style.height = "100%";
							this.map.resize();
						},
						kill: function() {
							var that = this;
							// 创建锚点 循环出多个marker 标点
							for (let i = 0; i < that.list.length; i++) {
								marker = new plus.maps.Marker(new plus.maps.Point(that.list[i].locationX, that.list[i].locationY)); //锚点
								
								marker.setIcon("../images/logo3.png"); // 图标
								//从当前位置到 厕所的位置! 
								var point = new plus.maps.Point(that.currentX, that.currentY);
								var point2 = new plus.maps.Point(that.list[i].locationX, that.list[i].locationY);

								let _list = that.list[i];
								// 添加终点坐标
								_list.pointAll = point2;
								this.myPoint = point;

								plus.maps.Map.calculateDistance(point, point2, function(event) {
									var distance = event.distance; // 转换后的距离值 得到m,转换成km
									var km = (distance / 1000).toFixed(1);
									// 1分钟等于70米,算用时！
									let times = (distance / 70).toFixed(0);
									this.times = times;

									function timeStamp(StatusMinute) {
										var day = parseInt(StatusMinute / 60 / 24);
										var hour = parseInt(StatusMinute / 60 % 24);
										var min = parseInt(StatusMinute % 60);
										StatusMinute = "";
										if (day > 0) {
											StatusMinute = day + "天";
										}
										if (hour > 0) {
											StatusMinute += hour + "小时";
										}
										if (min > 0) {
											StatusMinute += parseFloat(min) + "分钟";
										}
										return StatusMinute;
									}
									var Times = timeStamp(this.times);
									_list.times = Times;
									//这里是由后台控制的显示范围, that.mapRange为公里 如果在这个范围之内就显示!前2个里我最近的厕所
									if (km < that.mapRange) {
										if (km < 1) { //不到1千米显示米
											km = (km * 1000) + "米";
										} else {
											km = km + "公里";
										}
										//给list[i]添加一个属性 kms 值为 km (也就是距离),在把他push到新的lists数组中!
										_list.kms = km;
										// 把真实的米数 添加到lists中realkm属性中去!
										_list.realkm = distance;
										that.listReal.push(_list);

										//选择离我最近的2个公厕!(用真实的米数做比较！)
										function compare(property) {
											return function(a, b) {
												var value1 = a[property];
												var value2 = b[property];
												return value1 - value2;
											}
										}

										that.listTwo = that.listReal.sort(compare('realkm'));
										//截取前2个	
										that.listTwo = that.listTwo.slice(0, 2);
										that.listFlag = true;
										that.height_70();
									} else {
										km = km + "公里";
										_list.kms = km;
										_list.realkm = distance;
										
										that.lists.push(_list);
										that.height_50();
									}

								}, function(e) {
									alert("Failed:" + JSON.stringify(e));
								});


								that.map.addOverlay(marker);
								// 点击mark事件 弹出详情信息

								marker.onclick = function(marker) {
									
									HTTP.post(that, 'toiletInfoController/queryToiletInfoByApp', function(res) {
										that.markerobj = res.data
										//添加一些后台没有的数据,通过前台计算的东西.
										that.markerobj.pointAll = _list.pointAll;
										that.markerobj.times = _list.times;
										that.markerobj.kms = _list.kms;
										that.markerobj.realkm = _list.realkm;
									}, function(res) {
										mui.toast(res);
									}, {
										toiletId: _list.toiletId
									})

									//关闭列表
									that.listFlag = false;
									that.markFlag = true;
									that.height_50();

								}
								

							}
							
						},
						
						Routers:function(x, y,item) {
							//先重置清除所有覆盖物其中包括锚点(之前的笨方法)
							// this.map.clearOverlays();
							// this.kill();
							
							
							
							this.markFlag = true;
							this.height_50();
							this.map.resize();
							
							
							// 从地图中删除覆盖物对象(这里指的是路由)
							this.map.removeOverlay(this.router_lx);
							var start = x;
							var ends = y;
							var _list=item;
							
							var that = this;
							
							function walkingSearch(start, ends) {
								// 检索从起点到终点的步行线路
								var searchObj = new plus.maps.Search(map);
								searchObj.onRouteSearchComplete = function(state, result) {
									if (state == 0) {
										if (result.routeNumber <= 0) {
											alert("没有检索到结果");
										}
										that.router_lx=result.getRoute(0);
										
										that.map.addOverlay(result.getRoute(0));
										// that.map.removeOverlay(result.getRoute(0));//删除终点
										// for (var i = 0; i < result.routeNumber; i++) {
										// 	that.map.addOverlay(result.getRoute(i));
										// }
									} else {
										alert("检索失败");
										that.rest_map();
									}
								}
								searchObj.walkingSearch(start, "张家口", ends, "张家口");
							}
							walkingSearch(start, ends);
							//打开详情
							
							HTTP.post(that, 'toiletInfoController/queryToiletInfoByApp', function(res) {
								that.markerobj = res.data
								//添加一些后台没有的数据,通过前台计算的东西.
								that.markerobj.pointAll = ends;
								that.markerobj.times = _list.times;
								that.markerobj.kms = _list.kms;
								that.markerobj.realkm = _list.realkm;
							}, function(res) {
								mui.toast(res);
							}, {
								toiletId: _list.toiletId
							})
							
							
							
						},
						Routers2(x, y) {
							// 从地图中删除覆盖物对象(这里指的是路由)
							this.map.removeOverlay(this.router_lx);
							var start = x;
							var ends = y;
							var that = this;
							
							function walkingSearch(start, ends) {
								// 检索从起点到终点的步行线路
								var searchObj = new plus.maps.Search(map);
								searchObj.onRouteSearchComplete = function(state, result) {
									if (state == 0) {
										if (result.routeNumber <= 0) {
											alert("没有检索到结果");
										}
										that.router_lx=result.getRoute(0);
										that.map.addOverlay(result.getRoute(0));
									} else {
										alert("检索失败");
										that.rest_map();
									}
								}
								searchObj.walkingSearch(start, "张家口", ends, "张家口");
							}
							walkingSearch(start, ends);
						},
						Open_info: function() { //进入详情页							
							plus.storage.setItem('_toiletId', this.markerobj.toiletId);
							BASE.Custom_window('wc_info.html', 'wc_info.html', {
								toiletId: this.markerobj.toiletId
							});
						},
						rest_map() { //刷新当前页面
							this.map.hide(); //先隐藏地图,如果不隐藏的话 会出现2个地图这种bug! 然后在刷新页面
							
							window.location.reload()
						},

					},
					created: function() {
						//如果获取了定位-显示位置!
						document.addEventListener('home_reload',function(){
							app.rest_map();
						})
						
						var map_rest=plus.webview.getWebviewById('map_rest');
						plus.webview.close(map_rest);
						
						
						this.map = new plus.maps.Map("map");
						//开启定位
						this.map.showUserLocation(true);
						
						
						var pt1 = new plus.maps.Point( 114.868248,40.809206);
					
						this.map.centerAndZoom(pt1, 17);
					
					
						// 获取map的实际高度
						this.em = document.getElementById("map");
						var o = document.getElementById("map");
						var h = o.offsetHeight; //高度
						this.mapH = h;
						
						this.GetData();
						
						//获取用户位置信息
						var that = this;
						
						
						this.map.getUserLocation(function(state, point) {
							if (0 == state) {
								//获取x,y
								that.map.setCenter(point);
								that.map.centerAndZoom(point, 17);
								
								that.currentX = point.longitude;
								that.currentY = point.latitude;
								that.kill();
								//为了让2个红色离我最近的显示
								setTimeout(function(){
									//这里that.listTwo为空！只有点击的时候下面的列表 才会有值 ======BUG
									that.listTwo.forEach((item) => {
										let marker = new plus.maps.Marker(new plus.maps.Point(item.locationX, item.locationY)); //锚点
										
										marker.setIcon("../images/logo2.png"); // 图标
										that.map.addOverlay(marker);
										marker.onclick = function(marker) {
											app.height_50();
											that.map.resize();
											HTTP.post(that, 'toiletInfoController/queryToiletInfoByApp', function(res) {
												that.markerobj = res.data
												//添加一些后台没有的数据,通过前台计算的东西.
												that.markerobj.pointAll = item.pointAll;
												that.markerobj.times = item.times;
												that.markerobj.kms = item.kms;
												that.markerobj.realkm = item.realkm;
											}, function(res) {
												mui.toast(res);
											}, {
												toiletId: item.toiletId
											})
									
											//关闭列表
											that.listFlag = false;
											that.markFlag = true;
									
										}
									})
								},1000);
							} else {
								alert("请开启手机GPS定位");
								
							}
						});
						
						var _this = this;
						setTimeout(function() {
							document.addEventListener('search_key', function() {
								var _list = JSON.parse(event.detail.data);
								
								var newslist = _this.listReal.filter(item => {
									//搜索厕所名称
									if (item.toiletName.includes(_list.toiletName)) {
										return item;
									}
								});
								
								_this.search_obj = newslist[0];
								
								
								
								HTTP.post(that, 'toiletInfoController/queryToiletInfoByApp', function(res) {
									_this.markerobj = res.data
									//添加一些后台没有的数据,通过前台计算的东西.
									_this.markerobj.pointAll = _this.search_obj.pointAll;
									_this.markerobj.times = _this.search_obj.times;
									_this.markerobj.kms = _this.search_obj.kms;
									_this.markerobj.realkm = _this.search_obj.realkm;
								}, function(res) {
									mui.toast(res);
								}, {
									toiletId: _this.search_obj.toiletId
								})

								//关闭列表
								_this.listFlag = false;
								_this.markFlag = true;
								_this.height_50();

							})
						}, 1000);


					},
				})
			
				//创建子窗口 重置地图按钮!  
				function createList() {
					var currentWindow = plus.webview.currentWebview(),
						//地址 ， id名:
						wsub = plus.webview.create('map/map_rest.html', 'map_rest', {
							bottom: '190px',
							height: '40px',
							width: '40px',
							position: 'absolute',
							scrollIndicator: 'none',
							zindex: '11',
							background: 'transparent'
						});

					//创建天气
					weather = plus.webview.create('map/map_weather.html', 'map_weather', {
						top: '25px',
						right: '10px',
						height: '60px',
						width: '80px',
						position: 'absolute',
						scrollIndicator: 'none',
						zindex: '11',
						background: 'transparent'
					});

					search = plus.webview.create('map/map_search.html', 'map_search', {
						top: '25px',
						left: '20px',
						height: '36px',
						width: '240px',
						position: 'absolute',
						scrollIndicator: 'none',
						zindex: '11',
						background: 'transparent'
					});

					currentWindow.append(wsub);
					currentWindow.append(weather);
					currentWindow.append(search);
				}
				createList();

				//监听子页面的方法 
				document.addEventListener('clickmapRest', function() {
					app.rest_map();
				});
	}
	
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}
</script>
</body>

</html>
